<style type="text/css">
  /* 去除二级菜单内的外边距 */
  accordion .panel-body {
    padding: 0px;
  }
  .mb_mr_5 {
    margin-bottom: 5px;
    margin-right: 5px;
  }
  .height45 {
    height: 45px;
  }
  .width150 {
    width: 150px;
  }
  .width116 {
    width: 116px;
  }
  .width50 {
    width: 50px;
  }
  .width34 {
    width: 34px;
  }
  .mt5 {
    margin-top: 5px;
  }
  .mb2 {
    margin-bottom: 2px;
  }
  .mb8 {
    margin-bottom: 8px;
  }
  .red_font {
    color: #f00;
  }
  .oneline {
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .bl0 {
    border-left: 0px;
  }
  .menu_two {
    font-size: 15px;
    color: #566;
  }
  .menu_three {
    font-size: 13px;
    color: #566;
  }
  .line_through {
    text-decoration:line-through;
  }
</style>
<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">角色管理</h1>
</div>
<div class="panel panel-default">

  <div class="panel-body">
    <div class="row wrapper">
      <div class="input-group mb_mr_5 width150" ng-repeat="role in roleList" style="float: left">
        <input type="text" class="col-sm-1 height45" ng-model="formData.id" ng-value="role.name" btn-radio="$index"
         ng-class="{'btn btn-default': !role.edit, 'form-control': role.edit, 
                  'width116': $index == formData.id, 'width150': $index != formData.id}"
         ng-click="getRoleMenuList($index)" ng-blur="saveRole(role,$event)" ng-keyup="saveRole(role,$event)" 
         ng-readonly="!role.edit" ng-dblclick="role.edit = true">
        <div class="input-group-btn" ng-show="$index == formData.id">
          <button type="button" class="btn btn-default text-center height45 width34 bl0" ng-click="delRole(role)">
            <i class="fa fa-times red_font" ng-show="!formData.loadindRole" aria-hidden="true"/>
            <i class="fa fa-spin fa-spinner hide show inline" ng-show="formData.loadindRole" aria-hidden="true" />
          </button>
        </div>
      </div>

      <button class="btn btn-lg btn-default mb_mr_5" ng-click="addRole()"><i class="fa fa-plus"></i></button>
      <span ng-show="roleList.length == 0" class="red_font"> 目前无可用角色，请点击【＋】添加！</span>
    </div>

    <!-- 网速太慢,画圈等 -->
    <h3 class="text-center" ng-if="formData.loadingMenu">
      <i class="fa fa-spin fa-spinner hide show inline"></i> 努力加载中...
    </h3>

    <!-- 全部菜单数据 -->
    <accordion close-others="false" ng-if="!formData.loadingMenu">
      <accordion-group is-open="menuOne.open" ng-repeat="menuOne in menuList">
        <accordion-heading>{{menuOne.name}}
          <i class="pull-right fa" ng-class="{'fa-angle-down': menuOne.open, 'fa-angle-right': !menuOne.open}" />
        </accordion-heading>
        <!-- 二级菜单 -->
        <div ng-repeat="menuTwo in menuOne.children">
          <div class="col-sm-12 mt5">
            <a href="" class="menu_two" ng-click="selectMenuTwo(menuTwo)">
              <i style="width: 13px;" ng-class="{'fa fa-check-square': menuTwo.check && (!menuTwo.children||menuTwo.selectChild == menuTwo.children.length), 
               'fa fa-minus-square': menuTwo.check && menuTwo.selectChild < menuTwo.children.length, 
               'fa fa-square-o': !menuTwo.check}"/> {{menuTwo.name}}
            </a>
          </div>
          <div class="line b-b mb2"></div>
          <div class="col-sm-12 mb8">
            <!-- 三级菜单 -->
            <div class="col-lg-2 mb2" ng-repeat="menuThree in menuTwo.children">
              <div class="text-left oneline">
                <a href="" class="menu_three" ng-click="selectMenuThree(menuTwo,menuThree)"
                 popover="{{menuThree.name}}" popover-trigger="mouseenter">
                  <i ng-class="{'fa fa-check-square': menuThree.check, 'fa fa-square-o': !menuThree.check}"
                   style="width: 11px;"/> 
                   <span ng-class="{'line_through': menuThree.end_flag==1}">{{menuThree.name}}</span>
                   <span class="red_font" ng-show="menuThree.end_flag==1">(已过期)</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </accordion-group>
    </accordion>

    <div class="text-right" ng-show="!formData.loadingMenu">
      <button class="btn btn-success" type="button" ng-click="saveMenu()">保存</button>
    </div>
  </div>
</div>
